<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-index-bar :index-list="indexList">
      <div v-for="(item, index) in indexList" :key="index">
        <van-index-anchor index="1">{{item}}</van-index-anchor>
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <!-- 不会写，好难啊，人傻了-->
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getLocation } from '@/api/location.js'
export default {
  data () {
    return {
      locationList: [],
      indexList: []
    }
  },

  created () {
    this.getLocationList()
    this.getAlphabet()
  },

  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async getLocationList () {
      const res = await getLocation()
      console.log(res.data.body)
      this.locationList = res.data.body
    },
    getAlphabet () {
      for (let i = 0; i <= 25; i++) {
        this.indexList.push(String.fromCharCode((65 + i)))
      }
      console.log(this.indexList)
      this.indexList.unshift('#', '热')
      console.log(this.indexList)
    }
  }
}
</script>

<style scoped lang='less'>

</style>
